<template>
  <div class="wrappers" v-show="isVisible">
    <div class="progress">
      <div class="progress-bar" :style="{width:percentage+'%',background:background}"></div>
      <span>{{percentage}}%</span>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
    props:["isOk"],
    data(){
        return {
          percentage:0,
          background: "#fff",
          isVisible: this.isOk,
        }
    },
    mounted (){
      const _this = this;
      _this.background = "#feffa5"; 
      _this.percentage ++;
    },
    watch:{
      percentage: function(n, o)  {
         if( n< 100){
          const _this = this;
            let add = setTimeout(function(){
              _this.background = "#feffa5"; 
              _this.percentage ++;
              if(_this.percentage>=100){
                clearInterval(add);
                return
              }
            },5)
         }else{
           return 
         }
      },
      isOk(val){
        this.isVisible = val;
      }
    }
}
</script>
<style lang="stylus" scoped>
 @import '~@/assets/styles/mixins.styl';
    .wrappers {
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        width 100%
        height 100%
        background #9f0b04
        display: flex;
        justify-content: center;
        align-items: center;
    }
  .progress {
    height: .1rem;
    width: 60%;
    margin: 0 auto;
    border-radius: .1rem;
    background: #ddd
    position relative
  }
  .progress-bar {
    height: .1rem;
    border-radius: .1rem;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 100ms;
  }
  .progress span {
    height: .1rem
    line-height: .5rem
    margin 0 auto 
    color: #feffa5
    font-size: .2rem
    display: block;
    text-align center
  }
</style>


